<template>
  <div class="mv_wrap">
    <div class="mv_left">
      <div class="left_title">
        <el-tag type="danger">MV</el-tag>
        <h4>{{ mvDetail.name }}</h4>
      </div>
      <div class="mv_video">
        <video
          :poster="mvDetail.cover"
          width="100%"
          height="400"
          controls
          :src="mvUrl.url"
          style="outline-style:none;"
        ></video>
      </div>
      <div class="recommend">
        <h4>热门评论</h4>
        <recommend-com
          :albumid="mvid"
          :remcommend-list="commentsList"
        ></recommend-com>
        <el-pagination
          background
          :page-size="20"
          @current-change="pageChange"
          :current-page.sync="offset"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
    <div class="mv_right">
      <h3>MV介绍</h3>
      <div class="count_time">
        <span>发行时间:{{ mvDetail.publishTime }}</span>
        <span>播放次数:{{ mvDetail.playCount }}</span>
      </div>
      <div>简介：{{ mvDetail.desc }}</div>
      <div>
        <h4>相关推荐</h4>
        <simi-mv :id="mvid"></simi-mv>
      </div>
    </div>
  </div>
</template>
<script>
import { _getMvDetail, _getMVUrl, _getMVComment } from '../../network/mv'
import simiMv from './childComps/simiMv.vue'
import recommendCom from '../../components/recommend/recommend.vue'
export default {
  components: { recommendCom, simiMv },
  data () {
    return {
      mvid: '',
      mvDetail: {},
      mvUrl: '',
      offset: 1,
      commentsList: [] //评论数据
    }
  },
  created () {
    this.mvid = this.$route.params.id
    this.getMvDetail()
    this.getMvUrL()
    this.getMVComment()
  },
  methods: {
    // 评论分页改变
    pageChange (val) {
      this.offset = val
      this.getMVComment()
    },
    // 获取mv详情
    async getMvDetail () {
      var res = await _getMvDetail(this.mvid)
      console.log(res)
      this.mvDetail = res.data.data
    },
    // 获取mv地址
    async getMvUrL () {
      var res = await _getMVUrl(this.mvid)
      console.log(res)
      this.mvUrl = res.data.data
    },
    // 获取mv评论
    async getMVComment () {
      var res = await _getMVComment(this.mvid, 20, (this.offset - 1) * 20)
      console.log(res)
      this.commentsList = res.data.comments
    }
  },
  watch: {
    $route () {
      this.mvid = this.$route.params.id
      //路由的参数变化 重新调用
      this.getMvDetail()
      this.getMvUrL()
      this.getMVComment()
    }
  }
}
</script>
<style lang="less" scoped>
.mv_wrap {
  width: 95%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  .mv_left {
    padding-left: 100px;
    width: 70%;
    .left_title {
      display: flex;
    }
    .mv_video {
      width: 100%;
      height: 400px;
      video {
        width: 100%;
        height: 400px;
        // outline-style: none;
      }
    }
  }
  .mv_right {
    width: 25%;
  }
}
.count_time {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
